<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <title>API接口服务</title>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <script type="text/javascript" src="js/module/lodash.js"></script>
  <style>
    * {
      margin: 0;
      padding: 0;
      outline: none;
    }
    body, html {
      width: 100%;
      /* height: 100%; */
      font-size: 12px;
    }
    li {
      list-style: none;
    }
    a {
      text-decoration: none;
    }
    .main {
      width: 100%;
      height: 100%;
      background-color: #ececec;
      color: #666;
      /* min-width: 1220px; */
      padding: 10px;
      box-sizing: border-box;
    }
    .wrap {
      width: 100%;
      /* clear: both; */
      display: flex;
    }
    .clearfix::before, .clearfix::after {
      content: ' ';
      visibility: hidden;
      display: block;
      font-size: 0;
      clear: both;
      height: 0;
    }
    .head {
      height: 210px;
      margin-bottom: 10px;
    }
    .container {
      height: 770px;
    }
    .mb-10 {
      margin-bottom: 10px;
    }
    .head-img {
      display: block;
      width: 300px;
      height: 100px;
      overflow: hidden;
      margin: 0 0 15px calc((100% - 300px)/2);
      background: url(images/senior-green.png) no-repeat 0 0;
      background-size: contain;
      font-family: PingFangSC-Medium, MicrosoftYaHei;
    }

    .head .left a {
      color: #fff;
      text-align: center;
      line-height: 30px;
      display: block;
      width: 250px;
      height: 30px;
      background: #00c1de;
      margin: 0 0 15px calc((100% - 250px)/2);
      font-family: PingFangSC-Medium, MicrosoftYaHei;
    }

    .left {
      /* width: calc(100% - 330px); */
      margin-right: 10px;
      background: #fff;
      /* float: left; */
      flex: 1;
    }

    .right {
      width: 320px;
      /* float: left; */
    }

    .title {
      font-size: 14px;
      /* display: block; */
      margin: 15px 20px;
      color: #666;
      font-family: PingFangSC-Medium, MicrosoftYaHei;
    }

    .btn {
      display: inline-block;
      font-family: PingFangSC-Medium, MicrosoftYaHei;
      font-size: 12px;
      cursor: pointer;
      text-align: center;
      width: 80px;
    }

    .btn-account {
      background: #00c1de;
      color: #fff;
      height: 30px;
      line-height: 30px;
    }

    .btn-more,
    .btn-detail {
      color: #00c1de;
    }
    .no,
    .yes {
      width: 18px;
      height: 15px;
      margin: 0 auto;
      display: block;
    }

    .yes {
      background: url(images/yes.png) no-repeat 0 0;
      background-size: 100% 100%;
    }
    .tip {
      height: 100px;
      line-height: 50px;
      background-color: #f9fafc;
      padding-left: 20px;
    }
    .tip-title {
      display: inline-block;
      width: 200px;
    }
    .tip-title strong {
      font-size: 24px;
      color: #00c1de;
      margin: 0 10px;
    }
    .container .left {
      padding: 0 50px;
      overflow: hidden;
    }
    .table {
      width: 100%;
      overflow: auto;
      /* border: 1px solid #f0eff0; */
    }
    table {
      width: 950px;
      margin: 0 auto;
      text-align: center;
      border: 1px solid #f0eff0;
      border-spacing: 0;
      overflow: hidden;
    }
    table th, table td {
      border-right: 1px solid #f0eff0;
      border-bottom: 1px solid #f0eff0;
    }
    table tr td:last-child, table tr th:last-child {
      border-right: none;
    }
    table tr:last-child td {
      border-bottom: none;
    }
    table th {
      background: #f9fafc;
      line-height: 59px;
      font-size: 14px;
      color: #666;
      font-weight: normal;
    }
    table td {
      color: #9b9b9b;
    }
    table tr {
      line-height: 39px;
    }
    .list {
      background: #fff;
      min-height: 318px;
      box-shadow: 0 0 5px 0 rgba(0,0,0,.2);
    }
    .list-title {
      height: 40px;
      line-height: 40px;
      font-family: PingFangSC-Regular,MicrosoftYaHei;
      font-size: 14px;
      color: #666;
    }
    .list-title span {
      display: inline-block;
      margin-left: 20px;
      float: left;
    }
    .list-title .btn {
      float: right;
    }
    .list-content {
      margin-left: 20px;
    }
    .list-content li {
      width: 270px!important;
      height: 35px;
      line-height: 35px;
      color: #666;
      width: 164px;
      overflow: hidden;
    }
    .list-content li a {
      color: #666;
    }
    .list-content li a:hover {
      font-weight: bold;
    }
    .list-news {
      height: 442px;
    }
    .header {
      width: 950px;
      overflow: hidden;
      margin: 15px auto;
      font-family: MicrosoftYaHei;
      font-size: 18px;
      color: #666;
      text-align: left;
      height: 29px;
      /* margin: 15px 0; */
      /* padding-left: 30px; */
    }
    .header p {
      display: inline-block;
      height: 30px;
      font-weight: bold;
      padding: 5px 10px;
      margin: 0;
      font-size: 14px;
      color: #666;
      padding-top: 0;
    }
  </style>
</head>

<body>
  <div class="main">
    <div class="head wrap">
      <div class="left">
        <p class="title">API服务</p>
        <div class="head-img"></div>
        <a href="javascript:login();">进入 API服务</a>
      </div>
      <div class="right">
        <div class="tip mb-10">
          <span class="tip-title account-info">
            <span>已开通账户</span>
            <strong>1</strong>
            <span>/</span>
            <strong>50</strong>
            <span>个</span>
          </span>
          <a href="javascript:;" class="btn-account btn">账户管理</a>
        </div>
        <div class="tip">
          <span class="tip-title">
            API服务
          </span>
          <a href="javascript:;" class="btn btn-detail">了解详情 > </a>
        </div>
      </div>
    </div>
    <div class="container wrap">
      <div class="left">
        <div class="header">
          <p>版本详情</p>
        </div>
        <div class="table">
          <table>
            <thead>
              <th>版本规格</th>
              <th>标准版(个人)</th>
              <th>高级版(企业)</th>
              <th>专业版(企业)</th>
            </thead>
            <tbody id="table">
            </tbody>
          </table>
        </div>
      </div>
      <div class="right">
        <div class="list mb-10">
          <div class="list-title clearfix">
            <span>常见问题</span>
            <a href="javascript:;" class="btn btn-more">更多</a>
          </div>
          <ul class="list-content" id="problem"></ul>
        </div>
        <div class="list list-news">
          <div class="list-title clearfix">
            <span>产品资讯</span>
            <a href="javascript:;" class="btn btn-more">更多</a>
          </div>
          <ul class="list-content" id="news"></ul>
        </div>
      </div>
    </div>
  </div>
</body>
<script type="text/template" id="tableTpl">
  <tr>
    <td><%= specification %></td>
    <td>
      <span class="<%= standard === 'yes' ? 'yes' : '' %>">
        <%= standard === 'yes' ? '' : standard %>
      </span>
    </td>
    <td>
      <span class="<%= advance === 'yes' ? 'yes' : '' %>">
        <%= advance === 'yes' ? '' : advance %>
      </span>
    </td>
    <td>
      <span class="<%= professional === 'yes' ? 'yes' : '' %>">
        <%= professional === 'yes' ? '' : professional %>
      </span>
    </td>
  </tr>
</script>
<script type="text/template" id="listTpl">
  <li>
    .&nbsp;<strong>[<%= prefix %>]</strong>
    <a href="<%= url %>"><%= content %></a>
  </li>
</script>
<script>
  function insertInfoTpl(data, el, tpl) {
    console.log(tpl)
    var infoTpl = tpl.innerHTML
    var compiled = _.template(infoTpl)
    var html = ''
    _.forEach(data, function(item, index) {
      item.index = index + 1
      html += compiled(item)
    })
    // dom.appendChild = html
    el.innerHTML = html
  }
  var problemData = [
    {prefix: '专题', url: 'javascript:;', content: '账号购买及高级版邀测说明'},
    {prefix: '专题', url: 'javascript:;', content: '目前API服务支持哪些数据源'},
    {prefix: '专题', url: 'javascript:;', content: '快速入门视频学习'},
    {prefix: '专题', url: 'javascript:;', content: '如何做数据权限管控'}
  ]
  var newsData = [
    {prefix: '专题', url: 'javascript:;', content: 'API服务'},
  ]
  var tableData = [
    {specification: 'IDC资源汇总服务', standard: 'yes', advance: 'yes',professional: 'yes'},
    {specification: 'IDC企业分布服务', standard: 'yes', advance: 'yes',professional: 'yes'},
    {specification: 'IDC机房分布服务', standard: 'yes', advance: 'yes',professional: 'yes'},
    {specification: 'IDC域名分布服务', standard: 'yes', advance: 'yes',professional: 'yes'},
    {specification: '云资源汇总服务', standard: 'yes', advance: 'yes',professional: 'yes'},
    {specification: '云企业分布服务', standard: 'yes', advance: 'yes',professional: 'yes'},
    {specification: '云机房分布服务', standard: '', advance: 'yes',professional: 'yes'},
    {specification: '云域名分布服务', standard: '', advance: 'yes',professional: 'yes'},
    {specification: '云IP地址分布服务', standard: '', advance: 'yes',professional: 'yes'},
    {specification: '云企业用户服务', standard: '', advance: 'yes',professional: 'yes'},
    {specification: '云企业机房服务', standard: '', advance: 'yes',professional: 'yes'},
    {specification: '云企业IP服务', standard: '', advance: 'yes',professional: 'yes'},
    {specification: 'CDN资源汇总服务', standard: '', advance: '',professional: 'yes'},
    {specification: 'CDN企业分布服务', standard: '', advance: '',professional: 'yes'},
    {specification: 'CDN域名分布服务', standard: '', advance: '',professional: 'yes'}
  ]
  var table = document.querySelector('#table')
  var tableTpl = document.querySelector('#tableTpl')
  var problem = document.querySelector('#problem')
  var problemTpl = document.querySelector('#problemTpl')
  var news = document.querySelector('#news')
  var newsTpl = document.querySelector('#newsTpl')
  insertInfoTpl(tableData, table, tableTpl)
  insertInfoTpl(problemData, problem, listTpl)
  insertInfoTpl(newsData, news, listTpl)
  
  
  function getQueryString(name) {
	  var reg = new RegExp('(^|&)' + name + '=([^&]*)(&|$)', 'i');
	  var r = window.location.search.substr(1).match(reg);
	  if (r != null) {
		return unescape(r[2]);
	  }
	  return null;
}


function ajax_method(url,data,method,success) {
    // 异步对象
    var ajax = new XMLHttpRequest();

    // get 跟post  需要分别写不同的代码
    if (method=='get') {
        // get请求
        if (data) {
            // 如果有值
            url+='?';
            url+=data;
        }else{

        }
        // 设置 方法 以及 url
        ajax.open(method,url);

        // send即可
        ajax.send();
    }else{
        // post请求
        // post请求 url 是不需要改变
        ajax.open(method,url);

        // 需要设置请求报文
        ajax.setRequestHeader("Content-type","application/x-www-form-urlencoded");

        // 判断data send发送数据
        if (data) {
            // 如果有值 从send发送
            ajax.send(data);
        }else{
            // 木有值 直接发送即可
            ajax.send();
        }
    }

    // 注册事件
    ajax.onreadystatechange = function () {
        // 在事件中 获取数据 并修改界面显示
        if (ajax.readyState==4&&ajax.status==200) {
            // console.log(ajax.responseText);

            // 将 数据 让 外面可以使用
            // return ajax.responseText;

            // 当 onreadystatechange 调用时 说明 数据回来了
            // ajax.responseText;

            // 如果说 外面可以传入一个 function 作为参数 success
            success(ajax.responseText);
        }
    }

}
  
  function login(){
	  window.open("index.html");  
  }
</script>
</html>